<template>
    <div class="yong_ui_upload_file">
        <div class="yong_ui_file_box">
            <div class="yong_ui_input_num">
                <input v-show="showFile" type="file" @change="getFile"/>
                <span v-if="fileName" class="file_name_blue">{{ fileName }}</span>
                <span v-else class="iconfont icon-add-select"> 请选择文件</span>
                <span v-if="fileName" class="delete_btn iconfont icon-icon-test42" @click="deleteFile"></span>
            </div>
            <UiButton :disabled="uploadDtn" class="reset_btn" type="info" @click="upload">{{ uploadBtnText }}</UiButton>
        </div>
        <div v-show="showPrg" class="yong_ui_file_prg">
            <div class="prg_box">
                <span class="prg_line" :style="{ width: progress+'%' }">
                    <small>{{ progress }}%</small>
                </span>
            </div>
            <span v-if="uploadTypeSuccess" class="success iconfont icon-icon-test45"></span>
        </div>
        <span v-if="uploadTypeFail" class="upload_error">上传失败</span>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import UiButton from '../button/button.vue'
import { uploadFile, initFileUpload } from './upload.js'
const props = defineProps({
    id: {
        default: null,
        type: String,
        required: true
    },
    option: {
        default: () => ({}),
        type: Object
    }
})
const emit = defineEmits(['uploadSuccess', 'uploadFail'])
const progress = ref(0)
const fileName = ref()
const uploadDtn = ref(true)
const uploadTypeSuccess = ref(false)
const uploadTypeFail = ref(false)
const uploadBtnText =  ref('上传')
const showPrg = ref(false)
const showFile = ref(true)
// 公用配置
const config = {
    id: props.id, // id要保持唯一且必填 **** 重要！！！ ****
    option: { ...props.option, file: null },
    success(e) {
        uploadSuccess(e)
    },
    fail(e) {
        uploadFail(e)
    },
    progress(e) {
        uploadProgress(e)
    }
}
// 初始化
const init = async() => {
    // 进入页面检查是否有未上传完成的文件
    const fileInfo = await initFileUpload(config)
    if (fileInfo) {
        fileName.value = fileInfo.fileName
        showPrg.value = true
    }
}
init()
// 上传提交
const upload = () => {
    uploadDtn.value = true
    showFile.value = false
    showPrg.value = true
    if (uploadTypeFail.value) {
        // 重新上传
        initFileUpload(config)
        uploadTypeFail.value = false
    } else {
        // 新选文件上传
        uploadFile(config)
    }
}
// 上传成功
const uploadSuccess = (e) => {
    emit('uploadSuccess', e)
    uploadTypeSuccess.value = true
}
// 上传失败
const uploadFail = (e) => {
    emit('uploadFail', e)
    uploadDtn.value = false
    uploadTypeFail.value = true
    uploadBtnText.value = '重新上传'
}
// 上传进度
const uploadProgress = (e) => {
    progress.value = e
}
// 获取文件
const getFile = ({target}) => {
    let file = target.files[0]
    uploadDtn.value = !file
    showPrg.value = false
    uploadTypeSuccess.value = false
    config.option.file = file
    fileName.value = file?.name
    uploadBtnText.value = '上传'
}
// 删除上传的文件
const deleteFile = () => {
    uploadDtn.value = true
    showPrg.value = false
    uploadTypeSuccess.value = false
    config.option.file = null
    fileName.value = null
    showFile.value = true
    progress.value = 0
    uploadBtnText.value = '上传'
}
</script>
<style lang="css" scoped>
.yong_ui_file_box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.reset_btn{
    margin: 0;
}
.reset_btn /deep/ button{
    border-radius: 0 4px 4px 0;
}
.yong_ui_input_num{
    position: relative;
    width: 300px;
    height: 40px;
    border: 1px solid var(--yong-ui-block05);
    border-radius: 4px 0 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.yong_ui_input_num input{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}
.yong_ui_input_num span{
    font-size: 12px;
}
.file_name{
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 0 3px var(--yong-ui-block05);
    border-radius: 2px;
    margin-top: 10px;
}
.prg_box{
    height: 10px;
    border-radius: 5px;
    background-color: #eeeff0;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}
.prg_line{
    background: linear-gradient(to right, #1d7fe0, #6a30de);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    color: #ffffff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.prg_line small{
    font-size: 12px;
    zoom: .6;
    padding: 0 4px;
}
.yong_ui_file_prg{
    width: 400px;
    position: relative;
}
.success{
    position: absolute;
    right: -20px;
    top: -7px;
    color: #1a95f3;
}
.yong_ui_upload_file{
    margin: 10px 0;
    margin-bottom: 20px;
}
.file_name_blue{
    color: #1a95f3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
    position: relative;
    font-size: 14px;
}
.yong_ui_input_num .delete_btn{
    position: absolute;
    right: 0;
    font-size: 16px;
    z-index: 10;
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    opacity: 0;
    transition: .3s;
}
.yong_ui_input_num:hover .delete_btn{
    opacity: 1;
}
.upload_error{
    font-size: 12px;
    display: inline-block;
    color: #e5431c;
    position: relative;
    top: -10px;
}
</style>